<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<view>
			<uni-nav-bar title="申请列表" left-icon="arrowleft" @clickLeft="back" :statusBar='true' :fixed="true"></uni-nav-bar>
		</view>
		<!-- #endif -->
		<view class="merchant-list">
			<view class="merchant-list-title">
				<view @click="onClickSelectIndex(-1)" :class="{ 'active': selectIndex === -1 }" class="merchant-list-title-li">全部</view>
				<view @click="onClickSelectIndex(0)" :class="{ 'active': selectIndex === 0 }" class="merchant-list-title-li">待预审</view>
				<view @click="onClickSelectIndex(1)" :class="{ 'active': selectIndex === 1 }" class="merchant-list-title-li">预审通过</view>
				<view @click="onClickSelectIndex(2)" :class="{ 'active': selectIndex === 2 }" class="merchant-list-title-li">预审失败</view>
				<view @click="onClickSelectIndex(3)" :class="{ 'active': selectIndex === 3 }" class="merchant-list-title-li">待平台审核</view>
				<view @click="onClickSelectIndex(5)" :class="{ 'active': selectIndex === 5 }" class="merchant-list-title-li">平台审核失败</view>
			</view>
			<uniApplyList :status="selectIndex"></uniApplyList>
		</view>
	</view>
</template>

<script>
	import { config } from '@/utils/config.js';
	import uniApplyList from "@/components/uni-apply-list/uni-apply-list"
	export default{
		components:{
			uniApplyList
		},
		data(){
			return{
				selectIndex:-1
			}
		},
		methods:{
			onClickSelectIndex(index){
				console.log(index)
			}
		}
	}
	
</script>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style scoped>
	.merchant-list {
		width: 100%;
	}

	.merchant-list-title {
		width: 100%;
		height: 66rpx;
		line-height: 66rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0rpx 20rpx;
		background-color: #f5f5f5;
	}

	.merchant-list-title-li {
		font-size: 24rpx;
		font-weight: 600;
		line-height: 64rpx;
		color: rgba(0, 0, 0, 0.85);
		line-height: 64rpx;
		text-align: center;
	}

	.active {
		color: #f02230;
	}

	.merchant-list-list {
		box-sizing: border-box;
		padding-left: 16rpx;
		padding-right: 14rpx;
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.appyl-list {
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 4rpx 12rpx 0px rgba(0, 0, 0, 0.05);
		border-radius: 12rpx;
		padding: 0rpx 30rpx;
		box-sizing: border-box;
		margin-bottom: 12rpx;
		width: 100%;
	}

	.appyl-list-top {
		height: 72rpx;
		border-bottom: 2rpx solid #eeeeee;
	}

	.appyl-list-top-name {
		font-size: 28rpx;
		line-height: 72rpx;
		height: 72rpx;
		color: #333;
		float: left;
		max-width: 500rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.appyl-list-top-state {
		font-size: 28rpx;
		line-height: 72rpx;
		height: 72rpx;
		color: #333;
		float: right;
	}

	.statedsh {
		color: rgba(247, 181, 0, 1);
	}

	.stateystg {
		color: #6dd400;
	}

	.stateyssb {
		color: #f02230;
	}

	.appyl-list-bottom {
		padding: 5rpx 0rpx;
		box-sizing: border-box;
	}

	.appyl-list-bottom-one {
		overflow: hidden;
	}

	.appyl-list-bottom-one-text {
		float: left;
	}

	.appyl-list-bottom-one-text:nth-child(1) {
		margin-right: 70rpx;
	}

	.appyl-list-bottom-one-text text {
		font-size: 28rpx;
		color: #333;
		line-height: 50rpx;
		height: 50rpx;
		float: left;
	}

	.appyl-list-bottom-one-text image {
		width: 28rpx;
		height: 34rpx;
		display: block;
		margin: 8rpx 14rpx 0rpx;
		float: left;
	}

	.appyl-list-bottom-two {
		font-size: 28rpx;
		color: #333;
		line-height: 50rpx;
	}

	.appyl-list-btn {
		border-top: 2rpx solid #eeeeee;
		height: 78rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.appyl-list-btn-one {
		width: 132rpx;
		height: 50rpx;
		border-radius: 12rpx;
		border: 2rpx solid rgba(240, 34, 48, 1);
		font-size: 24rpx;
		color: #f02230;
		line-height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.appyl-list-btn-two {
		width: 132rpx;
		height: 50rpx;
		border-radius: 12rpx;
		border: 2rpx solid #0091ff;
		font-size: 24rpx;
		color: #0091ff;
		line-height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 20rpx;
	}

	.refusal {
		padding-top: 20rpx;
		position: relative;
		overflow: hidden;
	}

	/* .refusal::after {
		position: absolute;
		content: '';
		width: 0;
		height: 0;
		border-right: 14rpx solid transparent;
		border-left: 14rpx solid transparent;
		border-bottom: 20rpx solid #fff;
		top: -18rpx;
		right: 206rpx;
	} */

	.refusal::before {
		position: absolute;
		content: '';
		width: 0;
		height: 0;
		border-right: 18rpx solid transparent;
		border-left: 18rpx solid transparent;
		border-bottom: 22rpx solid #c6c6c6;
		top: 0;
		right: 202rpx;
	}

	.refusal-input {
		width: 100%;
		height: 80rpx;
		border-radius: 12rpx;
		border: 2rpx solid rgba(221, 221, 221);
		display: flex;
		align-items: center;
		box-sizing: border-box;
	}

	.refusal-inputs {
		padding: 0;
		margin: 0;
		outline: none;
		border: none;
		width: calc(100% - 60rpx);
		height: 100%;
		box-sizing: border-box;
		padding-left: 22rpx;
		font-size: 30rpx;
		line-height: 80rpx;
		color: #333;
	}

	.refusal-input-close {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		background-color: #c6c6c6;
		line-height: 30rpx;
		text-align: center;
		color: #fff;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.placeholder {
		color: #cccccc;
	}

	.tj-btn {
		width: 132rpx;
		height: 50rpx;
		border-radius: 12rpx;
		border: 2rpx solid #0091ff;
		font-size: 24rpx;
		color: #0091ff;
		line-height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		float: right;
		margin: 15rpx 0rpx 25rpx;
	}
</style>
